<template>
    商品页
    <!-- 导航区 -->
     <ul>
        <!-- <li v-for="product in products">
            <router-link :to="{
                path: '/product/detail',
                query: {
                    id: product.id,
                    name: product.name,
                    price: product.price
                }
            }">{{ product.name }}</router-link>
        </li> -->
        <li v-for="product in products">
            <router-link :to="{
                name: 'xq',
                params: {
                    id: product.id,
                    name: product.name,
                    price: product.price
                }
            }">{{ product.name }}</router-link>
        </li>
     </ul>
     <hr>
     <!-- 详情展示区,展示嵌套的商品详情页面 -->
      <div class="detail">
        <router-view></router-view>
      </div>
</template>
<script setup>
import { reactive } from 'vue';
import { RouterLink,RouterView } from 'vue-router';
const products = reactive([{
    id: 1,
    name: 'iphone16',
    price: 6999
},{
    id: 2,
    name: '东芝饮水机',
    price: 3299
},{
    id: 3,
    name: '小米15',
    price: 4189
}])

</script>